<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" style="width:280px">
      <el-form-item label="用户名" prop="phone">
        <el-input v-model="form.phone" ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" show-password></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button type="primary" @click="onReset">重置表单</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        rules: {
          phone: [
            // trigger 校验时机：失去焦点
            { required: true, message: '你是不是xxxx', trigger:'blur' },
            { pattern: /^1\d{10}$/, message: '请输入合法的手机号', trigger: 'blur' }
          ],
          password: [
            // trigger 校验时机：失去焦点
            { required: true, message: '密码不能为空', trigger:'blur' },
            { min: 6, max: 8, message: '请输入6-8位的密码', trigger: 'blur' },
            {
              validator: function(rule, value, callback) {
                console.log(value)
                console.log(callback)
                // callback必须调用
                if(value === '123456') {
                  callback(new Error('密码太简单了'))  
                } else{
                  callback()
                }
                // rule：采用的规则
                // value: 被校验的值
                // callback是回调函数， 
                //      如果通过了规则检验，就直接调用callback()
                //      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
                //         例如：callback(new Error('错误说明'))  
              },
              trigger: 'blur'
            }
          ]
        },
        form: {
          phone: '',
          password: ''
        }
      }
    },
    methods: {
      doLogin () {
        alert('do login...')

      },
      onReset() {
        // 清除表单校验的痕迹
        this.$refs.form.resetFields()
      },
      onSubmit() {
        // 提交数据 手动兜底校验
        this.$refs.form.validate(valid => {
          if(valid) {
            // 表单校验通过
            this.doLogin()
          } else {
            alert('有错误')
          }
        })
        // 手机号不能为空
        // if(this.form.phone === '') {
        //   alert('手机号不能为空')
        // }
        // console.log('submit!');
      }
    }
  }
</script>